<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:a4j="http://richfaces.org/a4j">
    <h:head>
        <style>
            .column {
                width: 410px;
                vertical-align: top;
            }
            .rowc{
                text-align: right
            }
            .center{
                text-align:center;
                align:center;
            }
            .right{
                text-align:right;
                align:right;
            }
            .left{
                text-align:left;
            }
            .table{
                margin-top: 10px;
                text-align:left;
            }
            .table tr{
                height: 30px;
            }
            .table td{
                border-bottom:1px  dotted #cccccc;
            }
            .font-style{
                font-size: 20px !important;
                font-weight: bolder;

            }
        </style>
    </h:head>
    <h:form>
        <rich:panel styleClass="content-hight">
            <h:panelGrid columns="3">
                <h:inputText value="#{contractAlertBean.days}"
                             style="text-align: center;"
                             size="5">
                    <f:validateDoubleRange minimum="1" maximum="1000"/>
                    <a4j:ajax event="blur" execute="@this" render="@this,tableGroup"
                              listener="#{contractAlertBean.queryli}"/>
                </h:inputText>
                <h:outputLabel value="天" styleClass="font-style"/>
                <h:outputLabel value="合同执行预警" styleClass="font-style"/>
            </h:panelGrid>
            <h:panelGroup id="tableGroup">
                <h:dataTable id="editTable"
                             value="#{contractAlertBean.dataList}"
                             var="item"
                             width="100%"
                             styleClass="table"
                             rows="10"
                             frame="hsides">
                    <rich:column>
                        <f:facet name="header">
                            <h:panelGroup>
                                <h:outputText value="合同编号"/>
                            </h:panelGroup>
                        </f:facet>
                        #{item.number}
                    </rich:column>

                    <rich:column>
                        <f:facet name="header">
                            <h:panelGroup>
                                <h:outputText value="主题"/>
                            </h:panelGroup>
                        </f:facet>                    
                        <h:outputText value="#{item.topic}"/>                
                    </rich:column>

                    <rich:column>
                        <f:facet name="header">
                            <h:panelGroup>
                                <h:outputText value="计划付款日期"/>
                            </h:panelGroup>
                        </f:facet>

                        <h:outputText value="#{item.paytime}">
                            <f:convertDateTime pattern="yyyy年MM月dd日"/>
                        </h:outputText>
                    </rich:column>

                    <rich:column>
                        <f:facet name="header">
                            <h:panelGroup>
                                <h:outputText value="金额"/>
                            </h:panelGroup>
                        </f:facet>                    
                        <h:outputText value="#{item.money}"/>                
                    </rich:column>
                </h:dataTable>
                总金额：#{contractAlertBean.totalAmount}
            </h:panelGroup>
        </rich:panel>
    </h:form>
</ui:composition>
